<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>评论</title>
    <link href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js"></script>
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js"></script>

    <script type="text/javascript" src="rating/jquery.raty.min.js"></script>
    <script>
        var myApp=angular.module('remarkApp', []);
    </script>
    <script type="text/javascript" src="/js/remarks.js"></script>
    <script type="text/javascript" src="/js/header.js"></script>

</head>
<body ng-app="remarkApp">
<!--导航-->
<header class="am-topbar am-topbar-fixed-top" ng-controller="headerCtrl">
    <div class="am-container">
        <!--logo-->
        <h1 class="am-topbar-brand">
            <img src="/img/logo.jpg" height="43" width="139"/>
        </h1>

        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li ><a href="/index">首页</a></li>
                <li><a href="/tolist">电影列表</a></li>
                <li><a href="/actor-list">演员列表</a></li>
                <li><a href="/box-office">实时票房</a></li>
            </ul>

            <div class="{{passport}}">
                <div class="am-topbar-right ">
                    <button onclick="window.location.href='/toregister'"
                            class="am-btn am-btn-primary am-topbar-btn am-btn-sm am-radius">
                        <span class="am-icon-pencil"></span> 注册
                    </button>
                </div>
                <div class="am-topbar-right">
                    <button onclick="window.location.href='/tologin'"
                            class="am-btn am-btn-primary am-topbar-btn am-btn-sm am-radius">
                        <span class="am-icon-user"></span> 登陆
                    </button>
                </div>
            </div>
            <div class="{{userinfo}}">
                <div class="am-topbar-right">
                    <button ng-click="exit()"
                            class="am-btn am-btn-primary am-topbar-btn am-btn-sm am-radius">
                        <span class="am-icon-sign-out"></span> 退出
                    </button>
                </div>
                <div class="am-topbar-right" ng-click="myInfo()">
                    <img src="http://ozqy003kk.bkt.clouddn.com/{{img}}" width="48px" class="am-img-thumbnail am-circle" style="margin-right: 10px"/>
                </div>
            </div>

        </div>
    </div>
</header>

<div class="am-g" style="color:#FFF">
    顶部留白
</div>

<!--内容-->
<div class="am-container">
    <!--电影详细信息-->
    <div class="am-g" ng-controller="movieCtrl">
        <!--电影海报-->
        <div class="am-u-sm-4 ">
            <img src="http://ozqy003kk.bkt.clouddn.com/{{img}}" width="270px"/>
        </div>
        <!--电影信息-->
        <div class="am-u-sm-8">
            <h1>{{titlecn}}</h1>
            <p style="font-size:25px;">{{titleen}}</p>
            <p>{{type}} {{moviesTime}}上映</p>
            <div class="am-g">
                <div class="am-u-sm-2">
                    <p>评 分:</p>
                    <p>导 演:</p>
                    <p>演 员:</p>
                    <p>剧 情:</p>
                </div>
                <div class="am-u-sm-10">
                    <div class="demo">
                        <div id="readOnly-demo"></div>
                    </div>
                    <p>{{director}}</p>
                    <span ng-repeat="actor in actors"><a href="" ng-click="actorInfo(actor)">{{actor}} </a></span>
                    <p>{{story}}</p>
                </div>
            </div>
        </div>
        <!--弹窗-->
        <div class="am-modal am-modal-alert" tabindex="-1" id="actor-alert">
            <div class="am-modal-dialog">
                <div class="am-modal-bd">
                    {{message}}
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn">确定</span>
                </div>
            </div>
        </div>

    </div>

    <div class="am-g" style="color:#FFF">
        留白
    </div>

    <!--评论部分-->
    <div ng-controller="remarkCtrl">
        <!--输入评论-->
        <form class="am-form">
            <fieldset>
                <div class="am-form-group">
                    <label for="doc-ta-1">
                        表达你对想法(200字)
                        <div id="click-demo"></div>
                    </label>
                    <textarea class="" rows="5" id="doc-ta-1" ng-model="content"></textarea>
                </div>

                <p><button type="submit" class="am-btn am-btn-primary"
                           ng-click="remark()">提交</button></p>
            </fieldset>
        </form>

        <!--评论列表-->
        <div>
            <ul class="am-comments-list" ng-repeat="remark in remarks">
                <li style="margin: 10px;">
                    <img src="http://ozqy003kk.bkt.clouddn.com/{{remark.user.img}}" alt="" class="am-comment-avatar" width="48" height="48"/>

                    <div class="am-comment-main">
                        <header class="am-comment-hd">

                            <div class="am-comment-meta">
                                <span class="am-comment-author">{{remark.user.nickname}}</span>
                                <time>{{remark.time}}</time>
                            </div>
                        </header>

                        <div class="am-comment-bd">
                            {{remark.content}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>

</div>

<!--弹窗-->
<div class="am-modal am-modal-alert" tabindex="-1" id="remark-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
           已退出登录
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="successRemark-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            评论成功
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>
<div class="am-modal am-modal-alert" tabindex="-1" id="errorRemark-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            评论失败
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>

<script>
    var s=0;
    $(function() {
        $.fn.raty.defaults.path = 'rating/img';

        $('#click-demo').raty({
            score: 0,
            click: function(score) {
                s = score;
            }
        });
    });

</script>
</body>
</html>